<template>
  <div>
    <el-button type="primary" @click="onmit">返回</el-button>

    <div style="display: flex; justify-content: space-around">
      <!--  柱状图标数据样式-->
      <div :span="6">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div ref="main" style="width: 600px; height: 400px"></div>
      </div>

      <!--右边列表数据-->
      <div :span="6" style="height: 100px; width: 600px">
        <el-table :data="tableData" style="width: 100%" height="420">
          <!--     列表-->
          <el-table-column
            v-for="(item, index) in stateOptions"
            :key="index"
            :formatter="item.formatter"
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// import api from "../../api/index";
import { UpAdd, Update, UPDel, PageOne1 } from "../../api/modules/pageOne";

export default {
  data() {
    return {
      stateOptions: [
        {
          prop: "",
          label: "",
          width: "30px",
        },
        {
          prop: "time",
          label: "",
          width: "100px",
        },
        {
          prop: "refund",
          label: "退款",
          width: "150px",
        },
        {
          prop: "Pending",
          label: "待退款",
          width: "150px",
        },
        {
          prop: "headcount",
          label: "总数",
        },
      ], //循环列表数据
      tableData: [], //表单容器
    };
  },
  name: "HoMe",
  components: {},
  async mounted() {
    const msg = await this.init();

    const xData = [];
    const yData = [];
    const zData = [];
    const aData = [];
    for (const item of msg) {
      aData.push(item.headcount);
      xData.push(item.time);
      yData.push(item.refund);
      zData.push(item.Pending);
      // console.log("zData", yData)
    }
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      legend: {
        data: ["Evaporation", "Precipitation", "Temperature"],
      },
      xAxis: [
        {
          type: "category",
          data: xData,
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "退款人数",
          min: 0,
          max: 600,
          interval: 50,
          axisLabel: {
            formatter: "{value} 人",
          },
        },

        {
          type: "",
          name: "",
          min: 0,
          max: 0,
          interval: 0,
          axisLabel: {},
        },
      ],
      series: [
        {
          name: "退款",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value + " 人";
            },
          },
          data: yData,
        },

        {
          name: "待退款",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value + " 人";
            },
          },
          data: zData,
        },
        {
          name: "退款总人数",
          type: "bar",

          tooltip: {
            valueFormatter: function (value) {
              return value + "人";
            },
          },
          data: aData,
        },
      ],
    };

    //
    // // 指定图表的配置项和数据
    // const option = {
    //   title: {
    //     text: '退款柱状图'
    //   },
    //   legend: {
    //
    //     data: ['待退款数量'],
    //   },
    //   tooltip: {
    //     trigger: 'axis',
    //     axisPointer: {
    //       type: 'shadow'
    //     }
    //   },
    //   grid: {
    //     left: '3%',
    //     right: '4%',
    //     bottom: '3%',
    //     containLabel: true
    //   },
    //   xAxis: {
    //     type: 'category',
    //     data: xData
    //   },
    //   yAxis: {
    //     type: 'value'
    //   },
    //   series: [
    //     {
    //       name: '退款数量',
    //
    //       data: yData,
    //
    //       type: 'bar'
    //     }
    //   ]
    // };
    // 使用刚指定的配置项和数据显示图表。
    // 基于准备好的dom，初始化echarts实例
    const myChart = this.$echarts.init(this.$refs.main);
    myChart.setOption(option);
  },
  async created() {
    //页面创建获取数据渲染
    this.tableData = await this.init();

    // console.log(this.tableData)
  }, //页面创建获取数据渲染
  methods: {
    onmit() {
      this.$router.replace("/page1");
      console.log("点击返回", 1);
    },
    init() {
      return new Promise((reslove) => {
        // api.pageOne.getPageOne1()
        PageOne1().then((res) => {
          let { data } = res;
          reslove(data);
          // console.log("data", data);
        });
      });
    }, //柱状图请求数据接口初始化
  }, //方法
}; //柱状图标数据样式
</script>

<style>
</style>